<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <link rel="icon" href="./favicon.ico">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/login.css">
</head>
<body>
  <!-- nav bar盒子制作 -->
  <div class="nav-bar">
    <div class="back">
      <a href="./index.html">
        <!-- 字体图标快速引用 -->
        <i class="iconfont icon-zuojiantou"></i>
      </a>
    </div>
    <a href="#" class="register">注册</a>
  </div>

  <!-- header -->
  <div class="login-header">
    <h1>密码登录</h1>
    <a href="#">手机验证码登录<i class="iconfont icon-youjiantou"></i></a>
  </div>

  <!-- table -->
   <!-- 注重隐私：不记录autocomplete="off" -->
  <form action="" class="login-form" autocomplete="off">
    <div class="row">
      <!-- tel 在移动端是数字键盘 -->
      <input type="tel" placeholder="请输入手机号">
    </div>
    <div class="row">
      <input type="password" placeholder="请输入密码">
      <img src="./img/eye-off.svg">
    </div>
    <div class="row agree">
      <i class="iconfont icon-ico2"></i> 我已同意 <a href="#">用户协议</a> 及 <a href="#">隐私协议</a>
    </div>
    <button class="login-btn">登录</button>
    <p class="forget"><a href="#">忘记密码？</a></p>
  </form>
  <!-- QQ -->
  <div class="third-login">
    <p>
      <span>第三方登录</span>
    </p>
    <a href="#"><img src="./img/qq.svg"></a>
  </div>

  <!-- 引入flexible.js -->
  <script src="./js/flexible.js"></script>
</body>

</html>